<template>
  <div class="introduceCard">
    <my-card>
      <template #headInfo>
        <div class="headInfo">
          <i class="fa fa-user"></i>
          <span style="margin-left: 10px">我的简介</span>
        </div>
      </template>
      <template #bottomContent>
        <div class="bottomContent">
          <div class="introduceBox">
            {{ store.state.Pintroduce || "暂无个人介绍" }}
          </div>
        </div>
      </template>
    </my-card>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { useStore } from "vuex";
import myCard from "@/components/my/myCard.vue";
import Cache from "@/utils/Cache";
const store = useStore();
onMounted(() => {
  // 首次加载获取个人介绍
  store.commit("setIntroduce", Cache.getItem("user").introduce);
});
</script>

<style scoped lang="less">
.introduceCard {
  width: 100%;
  margin-top: 30px;
  .headInfo {
    color: rgb(49, 145, 215);
    font-size: 18px;
    letter-spacing: 0.1em;
  }
  .bottomContent {
    margin: 20px;
    padding-bottom: 20px;
    .introduceBox {
      padding: 20px;
      width: 100%;
      height: 100px;
      border: 1px solid #aaa;
      border-top: 2px solid #aaa;
      color: #b6afaf;
    }
  }
}
</style>
